<template>
	<view>
		<tui-icon @click="showButModel = !showButModel"   :name="showButModel?selectedIcon:icon" size="40" unit="rpx" color="#000000"></tui-icon>
		<tui-bubble-popup
			:show="showButModel" :mask="false" 
			direction="top" 
			@close="showButModel = flase" 
			right="10rpx"
			width="230rpx"
			translateY="20rpx"
			triangleRight="10rpx"
			triangleTop="-30rpx"
		>
		<view class="padding-sm">
			<view class="tui-menu-item tui-center tui-align-left margin-top-10 margin-left" >
				<tui-icon name="message-fill" size="40" unit="rpx" color="white"></tui-icon>
				<span class="margin-left text-30">
					发起群聊
				</span>		
			</view>
			<tui-divider height="55"></tui-divider>
			<view class="tui-menu-item tui-center tui-align-left margin-top margin-left" >
				<tui-icon name="friendadd-fill" size="40" unit="rpx" color="white"></tui-icon>
				<span class="margin-left text-30">
					添加好友
				</span>		
			</view>
			<tui-divider height="55"></tui-divider>
			<view class="tui-menu-item tui-center tui-align-left margin-left" >
				<tui-icon name="sweep" size="40" unit="rpx" color="white"></tui-icon>
				<span class="margin-left text-30">
					扫一扫
				</span>		
				
			</view>
			<tui-divider height="50"></tui-divider>
			<view class="tui-menu-item tui-center tui-align-left  margin-left" >
				<tui-icon name="qrcode" size="40" unit="rpx" color="white"></tui-icon>
				<span class="margin-left text-30">
					二维码
				</span>		
			</view>
			<tui-divider height="40"></tui-divider>
		</view>
		</tui-bubble-popup>
	</view>
</template>

<script>
	export default {
		name:'im-chatAddbtn',
		props:{
			icon:{//未选中的图标 ，只支持 thorUI的icon
				type:String,
				default:'add'
			},
			selectedIcon:{//选中的图标 ，只支持 thorUI的icon
				type:String,
				default:'close'
			},
		},
		data() {
			return {
				showButModel:false
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
